import React from "react";
import { Icon } from "../Icon"
import { Input, InputProps } from "./Input";
import { ComponentStory, ComponentMeta } from "@storybook/react";

export default {
    title: 'Wavexk/Input',
    component: Input,
    argTypes: {
        disabled: {
            type: "boolean",
            description: "Whether the input can be use",
            table: {
                defaultValue: {
                    summary: 'false'
                },
            },
            control: { type: 'boolean' },
            options: [true, false]
        },
        placeholder: {
            type: "string",
            description: "placeholder",
            table: {
                defaultValue: {
                    summary: '请输入'
                },
            },
            control: { type: 'text' },
        },
        size: {
            type: 'string',
            description: 'the size of this button',
            table: {
                type: {
                    summary: 'string',
                },
                defaultValue: {
                    summary: 'df'
                },
            },
            control: {type: 'inline-radio'},
            options: ['sm', 'df', 'lg']
        },
        icon: {
            control: { type: 'inline-radio' },
            options: ['search', 'copy'],
            description: " the input can use icon",
        },
        prepend: {
            type: "string",
            description: " the input can add prepend",
            control: { type: 'select' },
            options: ['http://', 'https://']
        },
        append: {
            type: "string",
            description: " the input can add append",
            control: { type: 'select' },
            options: ['.con', '.jpg', '.cn', '.org']
        },
        onIconClick: {
            description: "click icon",
            action: 'clicked'
        }
    },
} as ComponentMeta<typeof Input>;

/**
 disabled?: boolean;
 size?: 'df' | 'lg' | 'sm';
 icon?: IconProp;

 prepend?: string | ReactElement;
 append?: string | ReactElement;
 */

const Template: ComponentStory<typeof Input> = ({ ...args }) => <Input {...args} />

export const Default: ComponentStory<typeof Input> = Template.bind({})
Default.args = {

    size: "df",
    disabled: false,
}


export const Disabled: ComponentStory<typeof Input> = Template.bind({})
Disabled.args = {

    size: "df",
    disabled: true,
}


export const WithIcon: ComponentStory<typeof Input> = Template.bind({})
WithIcon.args = {
    icon: "search",
    size: "df",
    disabled: false,
}



export const WithPrepend: ComponentStory<typeof Input> = Template.bind({})
WithPrepend.args = {
    prepend: "http://",
    size: "df",
    disabled: false,
}


export const WithAppend: ComponentStory<typeof Input> = Template.bind({})
WithAppend.args = {
    append:  ".com",
    size: "df",
    disabled: false,
}


